<template>

      <div class="title">
        
        <h3>商品详情</h3></div>
      <el-card shadow="always" class="details-card" v-if="product">
        <img :src="product.image" class="image" alt="product image">
        <div class="details-content">
          <h1>{{ product.name }}</h1>
          <h5>价格: {{ product.price }}</h5>
          <h5>描述: {{ product.description }}</h5>
          <h5>成分: {{ product.benefits }}</h5>
        </div>
        <el-button @click="goBack">返回</el-button>
      </el-card>
      <p v-else>加载中...</p>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useProductDatatore } from '@/stores/product'
const route = useRoute();
const router = useRouter();
const product = ref(null);
const productStore = useProductDatatore()


const goBack = () => {
  router.push('/list');
};
onMounted(async () => {
  const productId = route.params.id; // 假设产品ID从路由参数中获取
  console.log(productId);
  product.value = await productStore.getProductById(productId); // 调用产品存储的方法获取产品详情
  console.log(product.value);
});
</script>

<style scoped>

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  height: 50px;
}
.title {
  height: 50px;
  width: calc(100% - 10px);
  display: flex;
  align-items: center;
  margin-left: 10px;
  color: #f4b2b6;
 
}
.title h3{
  border-bottom: 2px solid #f4b2b6;

}
.main {
  flex: 1;
  padding: 0 10px;
}

.image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.details-card {
  margin: 0 auto;
  max-width: 600px;
}

.details-content h1 {
  margin: 10px 0;
}

.details-content p {
  margin: 10px 0;
}

.el-button {
  background-color: #F4B2B6;
  border-color: #F4B2B6;
  color: #fff;
}

.el-button:hover {
  background-color: #F4B2B6;
  border-color: #F4B2B6;
}
</style>
